<template>
  <div style="width: 500px">
    <el-form :model="form" label-width="120px" >

<el-form-item label="帖子标题">
  <el-input v-model="form.title" />
</el-form-item>

<el-form-item label="帖子标签">
  <el-select v-model="form.region" placeholder="选择合适的标签让更多志同道合的朋友看到你吧！">
    <el-option label="美食" value="1" />
    <el-option label="科技" value="2" />
    <el-option label="萌宠" value="3" />
    <el-option label="健康" value="4" />
    <el-option label="游戏" value="5" />
    <el-option label="时尚" value="6" />
    <el-option label="二次元" value="7" />
    <el-option label="教育学习" value="8" />
    <el-option label="职场" value="9" />
    <el-option label="旅行" value="10" />
  </el-select>
</el-form-item>


<el-form-item label="请输入正文">
  <el-input v-model="form.content" type="textarea" />
</el-form-item>


<el-form-item  label="上传图片" v-model="form.image">
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/ODP_Project/community/post/handlePicture"
      :limit="1"
      :show-file-list="true"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
</el-form-item>

<el-form-item class="ops">
  <el-button type="primary" @click="submit">发布帖子</el-button>
  <el-button @click="cancel">取消</el-button>
</el-form-item>

</el-form>
  </div>
  </template>
    
    
    <script lang="ts" setup>
    import { reactive,ref } from 'vue'
    import { useRouter } from 'vue-router';
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import axios from 'axios';
    import { ElMessage } from 'element-plus'

    const router =useRouter()
    const imageUrl = ref('')
    
    // do not use same name with ref
    const form = reactive({
      title: '',
      region: '',
      content: '',
      image:'',
    })


  
  const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
  ) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    form.image=response.data
  }
  

  function handleRemove(){
    imageUrl.value=''
  }



    //发布帖子
    const submit = () => {
      console.log(form.title+"-"+form.region+"-"+form.content+"-"+form.image)
      const postData={
        title:form.title,
        perferId:form.region,
        content:form.content,
        picture:form.image
      }
      
    axios.post('http://localhost:8080/ODP_Project/community/post',postData)
    .then(res =>{
     console.log(res)
     ElMessage({
      message: '发帖成功.',
     type: 'success',
      })
      router.push({
      path:'community',
})
    })
    .catch(error =>{
      console.log("发帖失败...",error)
    })

    }

    //取消，回到主页
    const cancel=()=>{
        router.push({
            path:"/show"
        })
    }


    
    </script>
    
    <style scoped>
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border-radius: 10%;
    border: 1px solid #8c939d;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .ops{
    margin-left: 50px;
  }
    
    </style>